<template>
  <div>
    <h1>class的绑定</h1>
    <div v-bind:class="{ active: isActive }">对象语法 </div>
    <div class="border"
         v-bind:class="{ active: isActive, 'text-danger': hasError }"> 对象语法
    </div>
    <div v-bind:class="classObject"> 对象语法
    </div>
    <div v-bind:class="[activeClass, errorClass]">数组语法</div>
    <div v-bind:class="[isActive ? activeClass : '', errorClass]">数组语法</div>
  </div>
</template>

<script>
export default {
  name: 'chp-02',
  data () {
    return {
      isActive: true,
      hasError: false,
      classObject: {
        active: true,
        'text-danger': false
      },
      activeClass: 'active',
      errorClass: 'hasError'
    }
  }
}
</script>

<style lang="css" scoped>
.active {
  color: red;
}
.hasError {
  font-size: 20px;
}
.border {
  border: 1px solid green;
}
</style>
